<template>
  <el-container id="lap-app">
    <el-main>
      <lap-find-bar>
        <template slot="default">
          <el-select
            v-model="searchMockName"
            filterable
            placeholder="模拟器名称"
            clearable
            style="width: 550px"
          >
            <el-option
              v-for="item in mockInfoList"
              :key="item.Name"
              :label="item.Name + ' - ' + item.Description"
              :value="item.Name"
            >
            </el-option>
          </el-select>
          <el-input
            placeholder="输入发送/接收关键字回车"
            v-model="searchWords"
            @change="onSearch"
            style="width: 250px"
          ></el-input>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </template>
      </lap-find-bar>
      <lap-table-bar>
        <template slot="title">接口模拟数据</template>
        <template slot="menu">
          <el-button type="primary" @click="platLoadData">刷新</el-button>
        </template>
      </lap-table-bar>
      <el-table
        ref="table"
        :data="tableData"
        :highlight-current-row="true"
        class="dbclickable"
        @row-dblclick="onDetail"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column
          property="MockName"
          label="模拟器名称"
          width="250"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope"
            >{{ scope.row.MockName }} -
            {{ scope.row.MockDescription }}</template
          >
        </el-table-column>
        <el-table-column
          property="CreateDate"
          label="日期"
          :show-overflow-tooltip="true"
          width="170"
        ></el-table-column>
        <el-table-column
          property="Direct"
          label="发起方"
          width="100"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">{{
            scope.row.Direct === 0 ? "本系统" : "第三方系统"
          }}</template>
        </el-table-column>
        <el-table-column
          property="SendData"
          label="发送数据"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          property="ResponseData"
          label="接收数据"
          :show-overflow-tooltip="true"
          width="450"
        ></el-table-column>
      </el-table>
      <lap-pagination
        ref="pager"
        @pager-change="onPagerChange"
        :total="pager.total"
        :defaultPageSize="100"
      ></lap-pagination>

      <!--编辑页面-->
      <el-dialog
        custom-class="lap-form-edit lap-dialog-full"
        title="模拟数据"
        v-if="editVisible"
        :visible.sync="editVisible"
        :close-on-click-modal="false"
      >
        <MockDataEdit ref="formEdit" :dataId="pSelectedId"></MockDataEdit>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import MockDataEdit from "./MockDataEdit.vue"; //编辑页面组件
export default {
  mixins: [$lap.BaseView],
  name: "app",
  components: { MockDataEdit }, //引用组件
  data() {
    return {
      title: "", //页面标题，例如：用户管理
      pageFunctionCode: "", //页面功能定义，例如：00100104
      tableData: [],
      pager: {},
      searchWords: "",
      searchMockName: "",
      mockInfoList: [],
      //编辑相关字段
      editVisible: false,
    };
  },
  methods: {
    /**
     * 加载
     */
    platLoadData() {
      const that = this;
      that.loadData();
      that.getMockInfoList();
    },
    /**
     * 加载数据
     */
    loadData() {
      const that = this;
      that.pager = that.$refs["pager"].getPager();

      $lap
        .post("/MYWS/MockHandler.ashx?type=PageMockSendData", {
          PageIndex: that.pager.currentPage - 1,
          PageSize: that.pager.pageSize,
          MockName: that.searchMockName,
          SearchWords: that.searchWords,
        })
        .then((data) => {
          that.tableData = data.rows;
          that.pager.total = data.total;
        });
    },
    /**
     * 列表翻页
     */
    onPagerChange() {
      this.$refs["pager"].resetPager();
      this.loadData();
    },
    /**
     * 搜索
     */
    onSearch() {
      const that = this;
      that.$refs["pager"].resetPager();
      that.loadData();
    },
    /**
     * 编辑
     */
    onDetail(row) {
      const that = this;
      that.pSelectedId = row.MockSendDataGUID;
      that.editVisible = true;
    },
    /**
     * 查询Mock信息
     */
    getMockInfoList() {
      const that = this;
      $lap
        .post("/MYWS/MockHandler.ashx?type=ListMockInfoData", {
          Keywords: "",
        })
        .then((data) => {
          that.mockInfoList = data;
        });
    },
  },
  watch: {
    searchMockName(nval, oval) {
      this.$refs["pager"].resetPager();
      this.loadData();
    },
  },
};
</script>